<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GraphVis图可视化分析应用</title>
		<link rel="stylesheet" href="common/handsontable/handsontable.full.min.css"/>
		<link rel="stylesheet" href="common/jsonviewer/jquery.jsonview.css" />
		<link rel="stylesheet" href="common/pear/css/pear.css" />
		<link rel="stylesheet" href="common/css/common.css" />
		<link rel="stylesheet" href="css/defined-icon.css" />
		<link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/element-index.css">
	</head>
	<body>
		<div class="layui-card" >
			<div id="visual-panel" class="layui-card-body" style="padding:0px;position:relative;">
        <div class="top-search" id="highlevelPanel">
          <div class="layui-form search-box" lay-filter="high-level-form">
            <i class="layui-icon layui-icon-search search-icon" page-event="highSearch"></i>
            <input type="text" name="attrValue" placeholder="请输入查询内容" class="layui-input search-input">
          </div>
        </div>
				<!-- 工具栏开始 -->
				<div class="top">
					<div id="toolbar-nav" class="nav_bar">
						<ul>
							<li class="l1 active" title="工具">
								<span><i class="layui-icon layui-icon-appstore"></i></span><!--工具-->
								<div class="hid">
									<ul>
										<li page-event="mouseMode" data-mode="normal"><span><i class="layui-icon layui-icon-select"></i>点选模式</span></li>
										<li page-event="mouseMode" data-mode="select"><span><i class="layui-icon layui-icon-gateway"></i>框选模式</span></li>
										<li page-event="quikOpt" data-opt="zoomOut"><span><i class="layui-icon layui-icon-plus-circle"></i>放大</span></li>
										<li page-event="quikOpt" data-opt="zoomIn"><span><i class="layui-icon layui-icon-minus-circle"></i>缩小</span></li>
                    <li page-event="codipos" data-mode="clockwise"><span><i class="layui-icon layui-icon-undo"></i>逆时针旋转</span></li>
                    <li page-event="codipos" data-mode="aclockwise"><span><i class="layui-icon layui-icon-redo"></i>顺时针旋转</span></li>
										<li page-event="quikOpt" data-opt="zoom1"><span><i class="layui-icon layui-icon-column-width"></i>1:1居中显示</span></li>
										<li page-event="quikOpt" data-opt="auto"><span><i class="layui-icon layui-icon-fullscreen-exit"></i>窗口内显示</span></li>
									</ul>
								</div>
							</li>
							<li class="l1" title="数据">
								<span><i class="layui-icon layui-icon-database"></i></span><!--数据-->
								<div class="hid">
									<ul>
										<li page-event="dataSet" data-filetype="simple"><span><i class="layui-icon layui-icon-build"></i>简单关系对</span></li>
										<li page-event="dataSet" data-filetype="complex"><span><i class="layui-icon layui-icon-read"></i>点边关系数据</span></li>
										<li page-event="dataSet" data-filetype="json"><span><i class="layui-icon layui-icon-file-text"></i>JSON数据设置</span></li>
										<li page-event="dataSet" data-filetype="importdata"><span><i class="layui-icon layui-icon-file-text"></i>导入数据绘图</span></li>
										<li page-event="dataSet" data-filetype="interface"><span><i class="layui-icon layui-icon-website"></i>服务接口</span></li>
										<li page-event="dataSet" data-filetype="demodata"><span><i class="layui-icon layui-icon-table"></i>内置示例数据</span></li>
										<li page-event="dataSet" data-filetype="resetdata"><span><i class="layui-icon layui-icon-refresh-3"></i>还原数据</span></li>
									</ul>
								</div>
							</li>
							<li class="l1" title="视图">
								<span><i class="layui-icon layui-icon-laptop"></i></span><!--视图-->
								<div class="hid">
									<ul>
										<li page-event="viewopt" data-mode="allSelect"><span><i class="layui-icon layui-icon-check-circle"></i>全选</span></li>
										<li page-event="viewopt" data-mode="rebackSel"><span><i class="layui-icon layui-icon-issuesclose"></i>反选</span></li>
										<li page-event="viewopt" data-mode="showSelNode"><span><i class="layui-icon layui-icon-check-square"></i>显示选中</span></li>
										<li page-event="viewopt" data-mode="hideSelNode"><span><i class="layui-icon layui-icon-border-verticle"></i>隐藏选中</span></li>
										<li page-event="viewopt" data-mode="showAll"><span><i class="layui-icon layui-icon-border-outer"></i>显示全部</span></li>
										<li page-event="viewopt" data-mode="delSelect"><span><i class="layui-icon layui-icon-delete"></i>删除选中</span></li>
										<li page-event="viewopt" data-mode="hideIsolatedNodes"><span><i class="layui-icon layui-icon-gold"></i>隐藏孤立点</span></li>
										<li page-event="viewopt" data-mode="clearAll"><span><i class="layui-icon layui-icon-rest"></i>清空数据</span></li>
									</ul>
								</div>
							</li>
							<li class="l1" title="分析">
								<span><i class="layui-icon layui-icon-CodeSandbox"></i></span><!--分析-->
								<div class="hid">
									<ul>
                    <li page-event="analyzeMode" data-mode="table"><span><i class="layui-icon layui-icon-table"></i>列表分析</span></li>
										<li page-event="analyzeMode" data-mode="connect"><span><i class="layui-icon layui-icon-branches"></i>连接分析</span></li>
										<li page-event="analyzeMode" data-mode="allpath"><span><i class="layui-icon layui-icon-fall"></i>路径分析</span></li>
										<li page-event="analyzeMode" data-mode="shortpath"><span><i class="layui-icon layui-icon-arrowright"></i>最短路径</span></li>
										<li page-event="analyzeMode" data-mode="checkCycle"><span><i class="layui-icon layui-icon-circle"></i>查找环</span></li>
										<li page-event="analyzeMode" data-mode="nodeMapAttr"><span><i class="layui-icon layui-icon-slider"></i>节点缩放</span></li>
										<li page-event="analyzeMode" data-mode="edgeMapAttr"><span><i class="layui-icon layui-icon-transfer"></i>边缩放</span></li>
										<li page-event="analyzeMode" data-mode="quality"><span><i class="layui-icon layui-icon-engine"></i>质量分析</span></li>
										<li page-event="analyzeMode" data-mode="relationship"><span><i class="layui-icon layui-icon-senior"></i>关系推理</span></li>
									</ul>
								</div>
							</li>

							<li page-event="layoutSet" title="布局设置">
								<span><i class="layui-icon layui-icon-snowflake"></i></span><!--布局设置-->
							</li>
							<li page-event="snaAnlayze" title="分类聚类">
								<span><i class="layui-icon layui-icon-sketch"></i></span><!--分类聚类-->
							</li>
							<li page-event="filterPanel" title="筛选">
								<span><i class="layui-icon layui-icon-filter"></i></span><!--筛选-->
							</li>
              <li page-event="graphStatistics" title="图统计信息">
                <span><i class="layui-icon layui-icon-barchart"></i></span>
              </li>
<!--							<li page-event="highlevelSearch">
								<span><i class="layui-icon layui-icon-search"></i></span>&lt;!&ndash;高级检索&ndash;&gt;
							</li>-->
						</ul>
					</div>
				</div>
				<!-- 工具栏结束 -->

				<!-- 图展示区域 -->
				<div id="graph-panel" style="width:100%;"></div>

        <!-- 节点树状图 -->
        <div id="nodeTree" class="node-tree">
          <el-tree ref="nodeTree" node-key="id" :props="props" :data="treeData" :load="loadNode" lazy show-checkbox @check="changeCheck"></el-tree>
        </div>

				<!-- 底部工具栏-->
				<div class="bottom-toolbar">
<!--					<div class="toolbar-items">
						<div class="toolbar-item" title="节点坐标调整">
							<i class="layui-icon layui-icon-radarchart"></i>
							<div class="item-childs" style="width:140px;">
								<div page-event="codipos" data-mode="zoomOut" class="child-item">
									<span><i class="layui-icon layui-icon-zoomin"></i></span>
								</div>
								<div page-event="codipos" data-mode="zoomIn" class="child-item">
									<span><i class="layui-icon layui-icon-zoomout"></i></span>
								</div>
								<div page-event="codipos" data-mode="clockwise" class="child-item">
									<span><i class="layui-icon layui-icon-undo"></i></span>
								</div>
								<div page-event="codipos" data-mode="aclockwise" class="child-item">
									<span><i class="layui-icon layui-icon-redo"></i></span>
								</div>
							</div>
						</div>
					</div>-->
          <!--layer.closeAll('page');-->
          <div class="toolbar-items" page-event="globleSet" title="显示设置">
            <div class="toolbar-item">
              <span><i class="layui-icon layui-icon-setting"></i></span>
            </div>
          </div>
          <div class="toolbar-items" page-event="searchNode" title="节点查询">
            <div class="toolbar-item">
              <span><i class="layui-icon layui-icon-search"></i></span>
            </div>
          </div>
					<div class="toolbar-items">
						<div class="toolbar-item" title="画布背景色">
							<i class="layui-icon layui-icon-bg-colors"></i>
							<div class="item-childs" style="width:40px;">
								<div class="child-item" style="display: inline-block">
									<span id="bgColorSelector"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="toolbar-items">
						<div class="toolbar-item" title="字体颜色">
							<i class="layui-icon layui-icon-font-colors"></i>
							<div class="item-childs" style="width:40px;">
								<div class="child-item">
									<span id="fontColorSelector"></span>
								</div>
							</div>
						</div>

					</div>
          <div class="toolbar-items">
            <div class="toolbar-item" title="标签">
              <i class="layui-icon layui-icon-font-size"></i>
              <div class="item-childs" style="width:90px;">
                <div page-event="showLabel" data-show="yes" class="child-item child-item-wid">
                  <span>显示</span>
                </div>
                <div page-event="showLabel" data-show="no" class="child-item child-item-wid">
                  <span>隐藏</span>
                </div>
              </div>
            </div>
          </div>
					<div class="toolbar-items">
						<div class="toolbar-item" title="缩略图">
							<i class="layui-icon layui-icon-eye"></i>
							<div class="item-childs" style="width:90px;">
								<div page-event="overview" data-show="yes" class="child-item child-item-wid">
									<span>显示</span>
								</div>
								<div page-event="overview" data-show="no" class="child-item child-item-wid">
									<span>隐藏</span>
								</div>
							</div>
						</div>
					</div>
					<div class="toolbar-items">
						<div class="toolbar-item" title="保存图片">
							<i class="layui-icon layui-icon-camera"></i>
							<div class="item-childs" style="width:90px;">
								<div page-event="saveImage" data-imgtype="jpeg" class="child-item child-item-wid">
									<span>JPG</span>
								</div>
								<div page-event="saveImage" data-imgtype="png" class="child-item child-item-wid">
									<span>PNG</span>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>


		<!-- 连线提示层 -->
		<section id="link-panel" class="netLinkInfo-box" style="display:none;">
		        <div class="atobNetLinkInfo-li">
		            <div class="atobNetLinkInfo-title">
		                <span id="link-source">起始实体名</span>
		                <span class="relationDesc">
		                    <span class="both">
		                        <!-- <span class="left-icon"></span> -->
		                        <span class="right-icon"></span>
		                    </span>
		                    <span id="link-label" class="desc-text">连线标签</span>
		                </span>
		                <span id="link-target">目标实体名</span>
		            </div>
		            <!-- <div class="atobNetLinkInfo-content">
		                <div class="atobNetLinkInfo-description">
		                </div>
		            </div> -->
		        </div>
		</section>

	</body>

	<!--全局设置 节点和边的样式 界面模板-->
	<script id="globleSetTeml" type="text/html">
		<div class="layui-tab layui-tab-brief" lay-filter="globlesetTab">
			<ul class="layui-tab-title">
				<li class="layui-this">节点设置</li>
				<li>连线设置</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="layui-form" lay-filter="node-config-form">
						<table class="layui-table" lay-size="sm" lay-skin="nob">
							<colgroup>
							    <col width="80">
							    <col>
							</colgroup>
							<tbody>
								<tr>
									<td>节点类型</td>
									<td>
										<select name="nodeShape">
											<option value="circle">圆形</option>
											<option value="rect">矩形</option>
											<option value="ellipse">椭圆形</option>
											<option value="star">五角形</option>
											<option value="triangle">三角形</option>
											<option value="polygon">六边形</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>节点颜色</td>
									<td>
										<div class="layui-input-inline" style="width:170px;">
											<input type="text" value="rgb(30,160,255)" name="nodeBgColor" placeholder="请选择颜色" class="layui-input" id="node-bgcolor-input" readonly="readonly">
										</div>
										<div class="layui-inline" style="left:-4px;">
											<div id="node-bgcolor"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td>节点大小</td>
									<td>
										<input type="number" value="60" min="1" max="200" name="nodeSize" class="layui-input"/>
									</td>
								</tr>
								<tr>
									<td>显示标签</td>
									<td>
										<select name="showlabel">
											<option value="yes">显示</option>
											<option value="no">不显示</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>字体位置</td>
									<td>
										<select name="nodeLabelPos">
											<option value="Middle_Center">居中</option>
											<option value="Bottom_Center">底部</option>
											<option value="Top_Center">顶部</option>
											<option value="Middle_Left">左方</option>
											<option value="Middle_Right">右方</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>字体偏移</td>
									<td>
										<input type="number" value="0" min="-100" max="100" name="nodeTextOffset" class="layui-input"/>
									</td>
								</tr>
								<tr>
									<td>字体颜色</td>
									<td>
										<div class="layui-input-inline" style="width:170px;">
											<input type="text" value="rgb(50,50,50)" name="nodeLabelColor" placeholder="请选择颜色" class="layui-input" id="node-labelcolor-input" readonly="readonly">
										</div>
										<div class="layui-inline" style="left:-4px;">
											<div id="node-labelcolor"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td>标签背色</td>
									<td>
										<div class="layui-input-inline" style="width:170px;">
											<input type="text" value="" name="nodeLabelBgColor" placeholder="请选择颜色" class="layui-input" id="node-labelbgcolor-input" readonly="readonly">
										</div>
										<div class="layui-inline" style="left:-4px;">
											<div id="node-labelbgcolor"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td>字体大小</td>
									<td>
										<input type="number" value="14" min="10" max="50" name="nodeLabelSize" class="layui-input"/>
									</td>
								</tr>
								<tr>
									<td>字体粗细</td>
									<td>
										<select name="nodeLabelBold">
											<option value="normal">常规</option>
											<option value="bold">粗体</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>字体样式</td>
									<td>
										<select name="nodeLabelStyle">
											<option value="Arial">默认</option>
											<option value="MicrosoftYaHei">微软雅黑</option>
											<option value="SimSun">宋体</option>
											<option value="KaiTi">楷体</option>
											<option value="LiSu">隶书</option>
										</select>
									</td>
								</tr>
							</tbody>
						</table>
						<button page-event="saveNodeConfig" class="pear-btn pear-btn-primary layui-btn-fluid">保存节点配置</button>
					</div>
				</div>

				<!--连线设置内容-->
				<div class="layui-tab-item">
					<div class="layui-form" lay-filter="line-config-form">
						<table class="layui-table" lay-size="sm" lay-skin="nob">
							<colgroup><col width="80"><col></colgroup>
							<tbody>
								<tr>
									<td>类型</td>
									<td>
										<select name="lineType">
											<option value="direct">直线</option>
											<option value="vlink">竖向折线</option>
											<option value="hlink">水平折线</option>
											<option value="vbezier">竖向曲线</option>
											<option value="hbezier">水平曲线</option>
											<option value="curver">弯曲线</option>
											<option value="bezier">贝塞尔曲线</option>
											<option value="arrowline">箭头连线</option>
											<option value="gephiline">二次贝塞尔</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>连线宽度</td>
									<td>
										<input type="number" value="2" min="1" max="30" name="lineWidth" class="layui-input"/>
									</td>
								</tr>
								<tr>
									<td>连线箭头</td>
									<td>
										<select name="showArrow">
											<option value="yes">显示</option>
											<option value="no">不显示</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>连线颜色</td>
									<td>
										<select name="colorType">
											<option value="source">继承源点色</option>
											<option value="target">继承目标点色</option>
											<option value="both">双向点色</option>
											<option value="defined">自定义色</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>自定义颜色</td>
									<td>
										<div class="layui-input-inline" style="width:170px;">
											<input type="text" value="rgb(20,20,20)" name="lineColor" placeholder="请选择颜色" class="layui-input" id="linecolor-input" readonly="readonly">
										</div>
										<div class="layui-inline" style="left:-4px;">
											<div id="line-color"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td>显示标签</td>
									<td>
										<select name="showlabel">
											<option value="yes">显示</option>
											<option value="no">不显示</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>字体大小</td>
									<td>
										<input type="number" value="14" min="10" max="50" name="lineLabelSize" class="layui-input"/>
									</td>
								</tr>
								<tr>
									<td>字体粗细</td>
									<td>
										<select name="lineLabelBold">
											<option value="normal">常规</option>
											<option value="bold">粗体</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>字体样式</td>
									<td>
										<select name="lineLabelStyle">
											<option value="Arial">默认</option>
											<option value="MicrosoftYaHei">微软雅黑</option>
											<option value="SimSun">宋体</option>
											<option value="KaiTi">楷体</option>
											<option value="LiSu">隶书</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>字体颜色</td>
									<td>
										<div class="layui-input-inline" style="width:170px;">
											<input type="text" value="rgb(50,50,50)" id="line-labelcolor-input"  name="lineLabelColor" placeholder="请选择颜色" class="layui-input" readonly="readonly">
										</div>
										<div class="layui-inline" style="left:-4px;">
											<div id="line-labelcolor"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td>标签背色</td>
									<td>
										<div class="layui-input-inline" style="width:170px;">
											<input type="text" value="" id="line-labelbgcolor-input" name="lineLabelBgColor" placeholder="请选择颜色" class="layui-input" readonly="readonly">
										</div>
										<div class="layui-inline" style="left:-4px;">
											<div id="line-labelbgcolor"></div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
						<button page-event="saveLineConfig" class="pear-btn pear-btn-primary layui-btn-fluid">保存连线配置</button>
					</div>

				</div>

			</div>
		</div>
	</script>

	<!-- 节点属性设置模板 -->
	<script id="nodeInfoTeml" type="text/html">
		<div style="height:100px;">
			<table class="layui-table" lay-skin="nob">
				<colgroup><col width="80"><col></colgroup>
				<tbody>
					<tr><td>名称</td><td><input id="nodeLabel" type="text" class="layui-input"/></td></tr>
					<tr><td>ID</td><td><input id="nodeId" type="text" class="layui-input"/></td></tr>
				</tbody>
			</table>
		</div>
		<div class="layui-tab layui-tab-brief">
		  <ul class="layui-tab-title">
		    <li class="layui-this">关联关系</li>
		    <li>属性</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">目标节点<span id="relate-targetnum" class="layui-badge layui-bg-orange numlabel">0</span></h2>
						<div class="layui-colla-content layui-show">
							<div id="outRelationTable" lay-filter="relationTable"></div>
						</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">来源节点<span id="relate-sourcenum" class="layui-badge layui-bg-orange numlabel">0</span></h2>
						<div class="layui-colla-content layui-show">
							<div id="inRelationTable" lay-filter="relationTable"></div>
						</div>
					</div>
				</div>
			</div>
		    <div class="layui-tab-item">
				<div id="nodePropTable"></div>
			</div>
		  </div>
		</div>
	</script>

  <!-- 节点事件设置 -->
  <script id="nodeEventTeml" type="text/html">
    <div>
			<table class="layui-table" lay-skin="nob">
				<colgroup><col width="80"><col></colgroup>
				<tbody>
					<tr><td>名称</td><td><input id="nodeEvLabel" type="text" class="layui-input"/></td></tr>
				</tbody>
			</table>
		</div>
    <div>
      <div id="nodeEventTable"></div>
      <div id="eventpage"></div>
		</div>
	</script>

  <!-- 添加节点设置 -->
  <script id="addNode" type="text/html">
    <form action="" class="layui-form add-form">
      <div id="form-body">
        <div class="layui-form-item">
          <label class="layui-form-label">关系</label>
          <div class="layui-input-block">
            <select name="relation" id="relation" lay-verify="required" lay-filter="relation"></select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">类型</label>
          <div class="layui-input-block">
            <select name="label" id="label" lay-verify="required" lay-filter="label"></select>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formAdd">新增</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </script>

  <!-- 新增连线设置 -->
  <script id="addLink" type="text/html">
    <form action="" class="layui-form add-link-form">
      <div id="add-link-form-body">
        <div class="layui-form-item">
          <label class="layui-form-label">关系</label>
          <div class="layui-input-block">
            <input type="text" id="" value=""  name="relation" lay-verify="required"  autocomplete="off" placeholder="" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formAddLink">新增</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </script>

  <!-- 修改节点设置 -->
  <script id="updateNode" type="text/html">
    <form action="" class="layui-form update-form">
      <div id="update-form-body">
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formUpdate">更新</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </script>

	<!-- 节点自定义配置 -->
	<script id="selectNodeSetTeml" type="text/html">
		<div class="layui-form" lay-filter="selnode-config-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<colgroup><col width="80"><col></colgroup>
				<tbody>
					<tr>
						<td>名称</td>
						<td>
							<input type="hidden" name="nodeId" class="layui-input"/>
							<input type="text" name="nodeLabel" class="layui-input"/>
						</td>
					</tr>
					<tr>
						<td>类型</td>
						<td>
							<select name="nodeShape">
								<option value="circle">圆形</option>
								<option value="rect">矩形</option>
								<option value="ellipse">椭圆形</option>
								<option value="star">五角形</option>
								<option value="triangle">三角形</option>
								<option value="polygon">六边形</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>颜色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="rgb(30,160,255)" name="nodeBgColor" placeholder="请选择颜色" class="layui-input" id="node-bgcolor-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="node-bgcolor"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td>大小</td>
						<td>
							<input type="number" value="60" min="1" max="200" name="nodeSize" class="layui-input"/>
						</td>
					</tr>
					<tr>
						<td>边框宽度</td>
						<td>
							<input type="number" value="0" min="0" max="20" name="borderWidth" class="layui-input"/>
						</td>
					</tr>
					<tr>
						<td>边框虚线</td>
						<td>
							<select name="lineDash">
								<option value="no">否</option>
								<option value="yes">是</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>边框颜色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="" name="borderColor" placeholder="请选择颜色" class="layui-input" id="node-bdcolor-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="node-bdcolor"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td>字体位置</td>
						<td>
							<select name="nodeLabelPos">
								<option value="Middle_Center">居中</option>
								<option value="Bottom_Center">底部</option>
								<option value="Top_Center">顶部</option>
								<option value="Middle_Left">左方</option>
								<option value="Middle_Right">右方</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>字体样式</td>
						<td>
							<input type="text" name="nodeFont" class="layui-input"/>
						</td>
					</tr>
					<tr>
						<td>字体颜色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="rgb(50,50,50)" name="nodeLabelColor" placeholder="请选择颜色" class="layui-input" id="node-labelcolor-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="node-labelcolor"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td>字体背色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="" name="nodeLabelBgColor" placeholder="请选择颜色" class="layui-input" id="node-labelbgcolor-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="node-labelbgcolor"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td>字体偏移</td>
						<td>
							<input type="number" value="0" min="-100" max="100" name="nodeTextOffset" class="layui-input"/>
						</td>
					</tr>

				</tbody>
			</table>
			<button page-event="saveCurNodeConfig" class="pear-btn pear-btn-primary layui-btn-fluid">保存配置</button>
		</div>
	</script>

	<!-- 连线自定义配置 -->
	<script id="selectLinkSetTeml" type="text/html">
		<div class="layui-form" lay-filter="sellink-config-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<colgroup><col width="80"><col></colgroup>
				<tbody>
					<tr>
						<td>连线类型</td>
						<td>
							<input type="hidden" name="lineId" class="layui-input"/>
							<select name="lineType">
								<option value="direct">直线</option>
								<option value="curver">曲线</option>
								<option value="bezier">贝塞尔曲线</option>
								<option value="arrowline">箭头连线</option>
								<option value="gephiline">二次贝塞尔</option>
								<option value="vlink">竖向折线</option>
								<option value="hlink">横向折线</option>
								<option value="vbezier">竖向贝塞尔曲线</option>
								<option value="hbezier">横向贝塞尔曲线</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>连线宽度</td>
						<td>
							<input type="number" value="3" min="1" max="30" name="lineWidth" class="layui-input"/>
						</td>
					</tr>
					<tr>
						<td>连线箭头</td>
						<td>
							<select name="showArrow">
								<option value="yes">显示</option>
								<option value="no">不显示</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>颜色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="rgb(20,20,20)" name="lineColor" placeholder="请选择颜色" class="layui-input" id="line-color-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="line-color"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td>连线标签</td>
						<td>
							<input type="text" name="lineLabel" class="layui-input"/>
						</td>
					</tr>
					<tr>
						<td>字体样式</td>
						<td>
							<input type="text" name="lineFont" class="layui-input"/>
						</td>
					</tr>
					<tr>
						<td>字体颜色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="rgb(50,50,50)" name="lineLabelColor" placeholder="请选择颜色" class="layui-input" id="line-labelcolor-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="line-labelcolor"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td>字体背色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="" name="lineLabelBgColor" placeholder="请选择颜色" class="layui-input" id="line-labelbgcolor-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="line-labelbgcolor"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td>虚线</td>
						<td>
							<select name="lineDash">
								<option value="no">否</option>
								<option value="yes">是</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>连线底色</td>
						<td>
							<div class="layui-input-inline" style="width:150px;">
								<input type="text" value="" name="background" placeholder="请选择颜色" class="layui-input" id="line-bgcolor-input" readonly="readonly">
							</div>
							<div class="layui-inline" style="left:-4px;">
								<div id="line-bgcolor"></div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<button page-event="saveCurLineConfig" class="pear-btn pear-btn-primary layui-btn-fluid">保存配置</button>
		</div>
	</script>

  <!-- 导入数据的表单 -->
  <script id="importDataTeml" type="text/html">
    <button type="button" class="layui-btn" id="import-upload">
      <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
  </script>

	<!-- 查找N层关系的界面模板 -->
	<script id="findNlayerTempl" type="text/html">
		<div class="layui-form" lay-filter="find-connect-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>节点名称</td>
					<td><input type="text" name="nodeLabel" placeholder="输入节点名称" class="layui-input"></td>
				</tr>
				<tr>
					<td>N层关系</td>
					<td><input type="number" value="1" min="1" max="6" name="nlayerNo" placeholder="输入n层关系" class="layui-input"></td>
				</tr>
			</table>
			<button page-event="findNodeConnect" class="pear-btn pear-btn-primary layui-btn-fluid">查找N层关系</button>
		</div>
	</script>

	<!-- 查找两点间的所有连通路径界 -->
	<script id="findAllPathTempl" type="text/html">
		<div class="layui-form" lay-filter="find-allpath-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>关系方向</td>
					<td>
						<select name="direction">
							<option value="source">正向</option>
							<option value="target">反向</option>
							<option value="all">不区分方向</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>起始节点</td>
					<td><input type="text" name="startNode" placeholder="输入起始节点名称" class="layui-input"></td>
				</tr>
				<tr>
					<td>目标节点</td>
					<td><input type="text" name="endNode" placeholder="输入目标节点名称" class="layui-input"></td>
				</tr>
			</table>
			<button page-event="findAllPath" class="pear-btn pear-btn-primary layui-btn-fluid">查找连通路径</button>
		</div>
	</script>

	<!-- 查找两点间的最短路径路径 -->
	<script id="findShortPathTempl" type="text/html">
		<div class="layui-form" lay-filter="find-shortpath-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>关系方向</td>
					<td>
						<select name="direction">
							<option value="source">正向</option>
							<option value="target">反向</option>
							<option value="all">不区分方向</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>起始节点</td>
					<td><input type="text" name="startNode" placeholder="输入起始节点名称" class="layui-input"></td>
				</tr>
				<tr>
					<td>目标节点</td>
					<td><input type="text" name="endNode" placeholder="输入目标节点名称" class="layui-input"></td>
				</tr>
			</table>
			<button page-event="findShortPath" class="pear-btn pear-btn-primary layui-btn-fluid">查找最短路径</button>
		</div>
	</script>

	<!-- 查询节点 -->
	<script id="findNodeTempl" type="text/html">
		<div class="layui-form" lay-filter="find-node-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>属性</td>
					<td>
						<select name="attribute">
							<option value="label">名称</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>属性值</td>
					<td><input type="text" name="attrValue" placeholder="输入查询内容" class="layui-input"></td>
				</tr>
			</table>
			<button page-event="findNode" class="pear-btn pear-btn-primary layui-btn-fluid">确定查询</button>
		</div>
	</script>

	<!-- 社区划分算法界面操作模板 -->
	<script id="snaAnalyzeTempl" type="text/html">
		<div class="layui-form" lay-filter="sna-analyze-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>聚类算法</td>
					<td>
						<select name="clusterType">
							<option value="chinesewisper">ChineseWhisper</option>
							<option value="louvain">Louvain</option>
							<option value="weakcommpent">WeakCommpent</option>
							<option value="bicomponet">Bicomponet</option>
							<option value="newman">Newman</option>
							<option value="kmeans">Kmeans</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>划分效果</td>
					<td>
						<select name="effectType">
							<option value="0">仅颜色区分</option>
							<option value="1">区域分组</option>
						</select>
					</td>
				</tr>
			</table>
			<button page-event="snaAnalyze" class="pear-btn pear-btn-primary layui-btn-fluid">执行社区划分</button>
		</div>
	</script>

	<!-- 节点按照指定属性映射大小 -->
	<script id="nodeWithAttrTempl" type="text/html">
		<div class="layui-form" lay-filter="nodesize-mapattr-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>属性</td>
					<td>
						<select name="nodeAttr">
							<option value="degree">度</option>
							<option value="outdegree">出度</option>
							<option value="indegree">入度</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>最小值</td>
					<td><input type="number" min="4" max="60" value="5" name="samllSize" placeholder="节点大小最小值" class="layui-input"></td>
				</tr>
				<tr>
					<td>最大值</td>
					<td><input type="number" min="4" max="160" value="150" name="bigSize" placeholder="节点大小最大值" class="layui-input"></td>
				</tr>
			</table>
			<button page-event="confirmMapNodeSize" class="pear-btn pear-btn-primary layui-btn-fluid">确定</button>
		</div>
	</script>

	<!-- 边按照指定属性映射粗细 -->
	<script id="edgeWithAttrTempl" type="text/html">
		<div class="layui-form" lay-filter="edge-mapattr-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>最小值</td>
					<td><input type="number" min="1" max="10" value="1" name="samllSize" placeholder="边的粗细最小值" class="layui-input"></td>
				</tr>
				<tr>
					<td>最大值</td>
					<td><input type="number" min="1" max="50" value="10" name="bigSize" placeholder="边的粗细最大值" class="layui-input"></td>
				</tr>
			</table>
			<button page-event="confirmMapEdgeWidth" class="pear-btn pear-btn-primary layui-btn-fluid">确定</button>
		</div>
	</script>

  <!-- 质量分析 -->
	<script id="qualityAttrTempl" type="text/html">
		<div class="layui-form" lay-filter="quality-attr-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>路径</td>
					<td><input type="text" value="" name="url" placeholder="文件路径" class="layui-input" lay-verify="required"></td>
				</tr>
			</table>
			<button page-event="confirmQuality" class="pear-btn pear-btn-primary layui-btn-fluid">确定</button>
		</div>
	</script>

  <!-- 爷孙节点关系探寻 -->
	<script id="relationAttrTempl" type="text/html">
		<div class="layui-form" lay-filter="relation-attr-form">
			<table class="layui-table" lay-size="sm" lay-skin="nob">
				<tr>
					<td>爷爷-父亲关系</td>
					<td><input type="text" value="" name="relation1" placeholder="爷爷-父亲关系" class="layui-input" lay-verify="required"></td>
				</tr>
				<tr>
					<td>父亲-儿子关系</td>
					<td><input type="text" value="" name="relation2" placeholder="父亲-儿子关系" class="layui-input" lay-verify="required"></td>
				</tr>
				<tr>
					<td>推理关系</td>
					<td><input type="text" value="" name="newRelation" placeholder="推理关系" class="layui-input" lay-verify="required"></td>
				</tr>
			</table>
			<button page-event="confirmRelation" class="pear-btn pear-btn-primary layui-btn-fluid">确定</button>
		</div>
	</script>

	<!--节点右键菜单-->
	<script id="nodeRightMenuTempl" type="text/html">
		<menu id="nodeContextMenu" class="menu show-menu">
			<li class="menu-item">
				<button type="button" attrtype="nodeDetail" class="menu-btn">
					<i class="layui-icon layui-icon-detail"></i>
					<span class="menu-text">节点详情</span>
				</button>
			</li>
			<li class="menu-item">
				<button type="button" attrtype="expanded" class="menu-btn">
					<i class="layui-icon layui-icon-screen-full"></i>
					<span class="menu-text">扩展关系</span>
				</button>
			</li>
			<li class="menu-item">
				<button type="button" attrtype="lookEvent" class="menu-btn">
					<i class="layui-icon layui-icon-senior"></i>
					<span class="menu-text">查看事件</span>
				</button>
			</li>
			<li class="menu-item">
				<button type="button" attrtype="nodeConnent" class="menu-btn">
					<i class="layui-icon layui-icon-fullscreen-exit"></i>
					<span class="menu-text">连线</span>
				</button>
			</li>
			<li class="menu-item">
				<button type="button" attrtype="contract" class="menu-btn">
					<i class="layui-icon layui-icon-gold"></i>
					<span class="menu-text">节点聚集</span>
				</button>
			</li>
			<li class="menu-item">
				<button type="button" attrtype="nodeConfig" class="menu-btn">
					<i class="layui-icon layui-icon-setting"></i>
					<span class="menu-text">自定义设置</span>
				</button>
			</li>
			<li class="menu-item submenu">
				<button type="button" attrtype="nodeopt" class="menu-btn">
					<i class="layui-icon layui-icon-wrench"></i>
					<span class="menu-text">其他操作</span>
				</button>
				<menu class="menu">
          <li class="menu-item">
            <button type="button" attrtype="addNode" class="menu-btn">
              <i class="layui-icon layui-icon-add-1"></i>
              <span class="menu-text">新建子节点</span>
            </button>
          </li>
          <li class="menu-item">
            <button type="button" attrtype="updateNode" class="menu-btn">
              <i class="layui-icon layui-icon-edit"></i>
              <span class="menu-text">修改节点</span>
            </button>
          </li>
					<li class="menu-item">
						<button type="button" attrtype="deleteNode" class="menu-btn">
							<i class="layui-icon layui-icon-delete"></i>
							<span class="menu-text">删除节点</span>
						</button>
					</li>
					<li class="menu-item">
						<button type="button" attrtype="selRelate" class="menu-btn">
							<i class="layui-icon layui-icon-deploymentunit"></i>
							<span class="menu-text">选中关联</span>
						</button>
					</li>
				</menu>
			</li>
		</menu>
	</script>

	<!-- 连线的右键菜单 -->
	<script id="linkRightMenuTempl" type="text/html">
		<menu id="linkContextMenu" class="menu show-menu">
			<li class="menu-item">
				<button type="button" attrtype="lineConfig" class="menu-btn">
					<i class="layui-icon layui-icon-setting"></i>
					<span class="menu-text">自定义设置</span>
				</button>
			</li>
			<li class="menu-item">
				<button type="button" attrtype="delEdge" class="menu-btn">
					<i class="layui-icon layui-icon-delete"></i>
					<span class="menu-text">删除连线</span>
				</button>
			</li>
		</menu>
	</script>

	<!-- 连线的右键菜单 -->
	<script id="spaceAreaRightMenuTempl" type="text/html">
		<menu id="spaceAreaContextMenu" class="menu show-menu">
			<li class="menu-item submenu">
				<button type="button" class="menu-btn">
					<i class="layui-icon layui-icon-laptop"></i>
					<span class="menu-text">鼠标模式</span>
				</button>
				<menu class="menu">
					<li class="menu-item">
						<button type="button" attrtype="mouseNormal" class="menu-btn">
							<i class="layui-icon layui-icon-select"></i>
							<span class="menu-text">点选模式</span>
						</button>
					</li>
					<li class="menu-item">
						<button type="button" attrtype="mouseSelect" class="menu-btn">
							<i class="layui-icon layui-icon-gateway"></i>
							<span class="menu-text">框选模式</span>
						</button>
					</li>
				</menu>
			</li>
			<li class="menu-item">
				<button type="button" attrtype="export" class="menu-btn">
					<i class="layui-icon layui-icon-download"></i>
					<span class="menu-text">下载数据</span>
				</button>
			</li>
			<li class="menu-item submenu">
				<button type="button" class="menu-btn">
					<i class="layui-icon layui-icon-save"></i>
					<span class="menu-text">保存图片</span>
				</button>
				<menu class="menu">
					<li class="menu-item">
						<button type="button" attrtype="savePng" class="menu-btn">
							<i class="layui-icon layui-icon-image"></i>
							<span class="menu-text">PNG格式</span>
						</button>
					</li>
					<li class="menu-item">
						<button type="button" attrtype="saveJPEG" class="menu-btn">
							<i class="layui-icon layui-icon-image"></i>
							<span class="menu-text">JPEG格式</span>
						</button>
					</li>
				</menu>
			</li>
		</menu>
	</script>
  <script src="./js/vue.js"></script>
  <script src="./js/ele-index.js"></script>
  <!--接口数据处理 -->
  <script src="js/postMessage.js"></script>
	<!--界面操作及公共组件-->
	<script src="common/jquery/jquery-3.3.1.min.js"></script>
	<script src="common/handsontable/handsontable.full.min.js"></script>
	<script src="common/jsonviewer/jquery.jsonview.js"></script>
	<script src="common/layui/layui.js"></script>
	<script src="common/pear/pear.js"></script>

	<!--GraphVis布局算法、聚类算法、可视化、动态扩展插件库-->
	<script src="libs/graphvis.layout.min.js"></script>
	<script src="libs/graphvis.cluster.min.js"></script>
	<script src="libs/graphvis.min.js"></script>
	<script src="libs/graphvis.active.plugin.min.js"></script>

	<!--界面功能源代码文件-->
	<script src="js/index.js"></script>

</html>
